<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<style type="text/css">
	#row{
		width: 100px;
		height: 30px;
		border: 1px solid black;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
	}
	
	.box{
		width: 100px;
		height: 30px;
		border: 1px solid black;
		border-radius: 5px;
		position: relative;
		text-align: center;
		line-height: 30px;
		left: 100px;
		top: -31px;
		display: none;
	}
	.child{
		width: 100px;
		height: 30px;
		border: 1px solid black;
		border-radius: 5px;
		position: relative;
		left: 100px;
		top: -31px;
	}

</style>
	<body>
			<div id="row">show
				
			</div>
	</body>

</html>
<script type="text/javascript">
$(function() {

    
  	$str = '{"status_code":1,"message":"ok","data":{"list":[{"id":77,"pid":0,"cname":"Y-1","status":0,"type":2,"update_time":"","create_time":"1522141833","level":1,"html":""},{"id":80,"pid":77,"cname":"Y-1-1","status":0,"type":2,"update_time":"","create_time":"1522141850","level":2,"html":"--"},{"id":90,"pid":80,"cname":"Y-1-1-1","status":0,"type":2,"update_time":"","create_time":"1522141936","level":3,"html":"----"},{"id":91,"pid":90,"cname":"Y-1-1-1-1","status":0,"type":2,"update_time":"","create_time":"1522145667","level":4,"html":"------"},{"id":95,"pid":91,"cname":"Y-1-1-1-1-1","status":0,"type":2,"update_time":"","create_time":"1522820242","level":5,"html":"--------"},{"id":81,"pid":77,"cname":"Y-1-2","status":0,"type":2,"update_time":"","create_time":"1522141855","level":2,"html":"--"},{"id":92,"pid":81,"cname":"Y-1-2-1","status":0,"type":2,"update_time":"","create_time":"1522145681","level":3,"html":"----"},{"id":82,"pid":77,"cname":"Y-1-3","status":0,"type":2,"update_time":"","create_time":"1522141861","level":2,"html":"--"},{"id":93,"pid":82,"cname":"Y-1-3-1","status":0,"type":2,"update_time":"","create_time":"1522145690","level":3,"html":"----"},{"id":83,"pid":77,"cname":"Y-1-4","status":0,"type":2,"update_time":"","create_time":"1522141866","level":2,"html":"--"},{"id":94,"pid":83,"cname":"Y-1-4-1","status":0,"type":2,"update_time":"","create_time":"1522145704","level":3,"html":"----"},{"id":78,"pid":0,"cname":"Y-2","status":0,"type":2,"update_time":"","create_time":"1522141839","level":1,"html":""},{"id":84,"pid":78,"cname":"Y-2-1","status":0,"type":2,"update_time":"","create_time":"1522141873","level":2,"html":"--"},{"id":96,"pid":84,"cname":"Y-2-1-1","status":0,"type":2,"update_time":"","create_time":"1524746156","level":3,"html":"----"},{"id":97,"pid":84,"cname":"Y-2-1-2","status":0,"type":2,"update_time":"","create_time":"1524746168","level":3,"html":"----"},{"id":98,"pid":84,"cname":"Y-2-1-3","status":0,"type":2,"update_time":"","create_time":"1524746181","level":3,"html":"----"},{"id":99,"pid":84,"cname":"Y-2-1-4","status":0,"type":2,"update_time":"1524746212","create_time":"1524746192","level":3,"html":"----"},{"id":100,"pid":99,"cname":"Y-2-1-4-1","status":0,"type":2,"update_time":"","create_time":"1524746224","level":4,"html":"------"},{"id":101,"pid":99,"cname":"Y-2-1-4-2","status":0,"type":2,"update_time":"","create_time":"1524746239","level":4,"html":"------"},{"id":102,"pid":99,"cname":"Y-2-1-4-3","status":0,"type":2,"update_time":"","create_time":"1524746245","level":4,"html":"------"},{"id":103,"pid":99,"cname":"Y-2-1-4-4","status":0,"type":2,"update_time":"","create_time":"1524746252","level":4,"html":"------"},{"id":104,"pid":103,"cname":"Y-2-1-4-4-1","status":0,"type":2,"update_time":"","create_time":"1524746410","level":5,"html":"--------"},{"id":85,"pid":78,"cname":"Y-2-2","status":0,"type":2,"update_time":"","create_time":"1522141880","level":2,"html":"--"},{"id":86,"pid":78,"cname":"Y-2-3","status":0,"type":2,"update_time":"","create_time":"1522141887","level":2,"html":"--"},{"id":79,"pid":0,"cname":"Y-3","status":0,"type":2,"update_time":"","create_time":"1522141844","level":1,"html":""},{"id":87,"pid":79,"cname":"Y-3-1","status":0,"type":2,"update_time":"","create_time":"1522141899","level":2,"html":"--"},{"id":88,"pid":79,"cname":"Y-3-2","status":0,"type":2,"update_time":"","create_time":"1522141906","level":2,"html":"--"}]}}';


	$obj = eval('(' + $str + ')');

	$data = $obj.data.list;


	function foo(obj,level){
		$t = 0;
		$.each(obj, function(index, val) {
			$html = '';

			if(val.level == level){
				$t++;
			 	if(val.level == 1){
			 		$html = '<div class="box" id='+val.id+' pid='+val.pid+'>'+val.cname+'</div>';
			 		$('#row').append($html);
			 		console.log('fff');
			 	}else{
			 		$boxObj = $('.box');
					for (var i = 0; i < $boxObj.length; i++) {
						
						if( ($boxObj.eq(i).attr('id') == val.pid) ){
							$html = '<div id='+val.id+' pid='+val.pid+' style="display:none" >'+val.cname+'</div>';
							$boxObj.eq(i).append($html);	
						}
						
						$chindObj = $boxObj.eq(i).children('div');
						for (var j = 0; j < $chindObj.length; j++) {
								if( ($chindObj.eq(j).attr('id') == val.pid) ){
									$html = '<div id='+val.id+' pid='+val.pid+' style="display:none" >'+val.cname+'</div>';
									$chindObj.eq(i).append($html);	
								}	

								$chindObjx = $chindObj.eq(j).children('div');
								for (var n = 0; n < $chindObjx.length; n++) {
										if( ($chindObjx.eq(n).attr('id') == val.pid) ){
											$html = '<div id='+val.id+' pid='+val.pid+' style="display:none" >'+val.cname+'</div>';
											$chindObjx.eq(n).append($html);	
										}



										$chindObjxy = $chindObjx.eq(n).children('div');
										for (var m = 0; m < $chindObjxy.length; m++) {
												if( ($chindObjxy.eq(m).attr('id') == val.pid) ){
													$html = '<div id='+val.id+' pid='+val.pid+' style="display:none" >'+val.cname+'</div>';
													$chindObjxy.eq(m).append($html);	
												}				
										};	
								};	
						};		 			
					};
			 	}
			}
		});
		if($t <= 0){
			return;
		}
		foo(obj,(level+1));
	}

	foo($data,1);


	$(document).on("mouseover mouseout",'.box',function(event){
		 if(event.type == "mouseover"){
		 	$(this).children('div').css('display','block');
		 	$(this).children('div').addClass('child');
		 }else if(event.type == "mouseout"){
		  	$(this).children('div').css('display','none');
		 }
	})



	$(document).on("mouseover mouseout",'.child',function(event){
		 if(event.type == "mouseover"){
		 	$(this).children('div').css('display','block');
		 	$(this).children('div').addClass('child');
		 }else if(event.type == "mouseout"){
		  	$(this).children('div').css('display','none');
		 }
	})


	$('#row').hover(function() {
		$('.box').css('display','block');
	}, function() {
		$('.box').css('display','none');
	});



	})
</script>